<script setup lang='ts'>
import { reactive } from "vue"
import TreeMenu from '@/layout/TreeMenu.vue'
// 路由信息
import { getRouterList } from "@/api/route/index"
import router from "@/router/index"
var routerData: any = reactive([])
// 路由信息
getRouterList().then(res => {
    console.log(res.data);
    routerData.push(...res.data)
})
console.log('routerData', routerData);

// routerList.forEach((item) => {
//     if (item.children) {
//         item.children.forEach(itemChildren => {
//             newRouterList.push(itemChildren)
//         })
//     } else {
//         console.log("noShow", noShow);
//         if (!noShow.includes(String(item.name))) {
//             newRouterList.push(item)
//         }
//     }
// })
</script>
 
<template>
    <div class="logo" @click="router.push('/home')">
        <SvgIcon name="sd2" height="40px" width="40px"/>
        <div>城市电力</div>
    </div>
    <!-- 获取传递进来的数据
    使用 eL-sub-menu 进行一个遍历
    ，遍历传递过来的所有数据，并且判断他是否有 children ，如果有children , menuType 为 1 的情况
    则使用 munuName 生成一个组
    递归判断是否有多级 children ，如果有 则继续生成下一级菜单
    判断到最后一个层级 ，如果说 menuType === 1 情况下,name这个肯定是可以 按钮 ,而不是一个组 所以，这个应该用 l-menu-item 进行染 -->
    <el-menu default-active="" background-color="#fff" class="el-menu-vertical-demo">
        <TreeMenu :routerList="routerData" />
    </el-menu>
</template>
 
<style scoped lang="scss">
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

.el-menu-vertical-demo {
    height: calc(100vh - 60px);
    border: none !important;
}

.logo {
    height: 60px;
    line-height: 60px;
    text-align: center;
    background-color: rgb(255, 255, 255);
    letter-spacing: 10px;
    color: rgb(252, 153, 5);
    font-weight: 700;
    font-family: 'Open Sans', sans-serif;
    cursor: pointer;
    display: flex;
    align-items: center;
    padding-left: 20px;
    div{
        margin-left: 20px;
    }
}


.el-menu-item {
    font-size: 15px;

    .icon {
        margin-right: 30px;
    }
}
</style>